<template>
	<view class="content">
		<view class="top-search share">
			<image class="left" src="../../static/left.svg" mode=""></image>
			<view class="search-box">
				<image class="search" src="../../static/srh.svg" mode=""></image>
				<input class="inp"  type="text" value="" placeholder="请输入搜索内容" />
			</view>
			<text>取消</text>
		</view>
		阿松大 阿松大
		<view class="tab-ul">
			<text @click="getChange(index)"   class="tab-list " :class="{ active: isActive == index}" v-for="(item, index) in tabList" >{{item}}</text>
		</view>
		
		
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:["全部","服务","资讯","办事攻略","常见问题"],
				isActive: false
			}
		},
		onLoad() {

		},
		methods: {
			getChange(index){
				console.log(index)
				this.isActive = index
			}
		}
	}
</script>

<style>

	.share{
		margin: 0 24rpx;
	}
	.top-search {
		display: flex;
		font-size: 28rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #e8e8e8;
	}
	.search-box {
		flex: 3;
		display: flex;
		padding: 10rpx;
		border-radius: 36rpx;
		background-color: #f5f5f5;
		height: 40rpx;
	}
	
		.search-box .search{
			margin: 8rpx 19rpx 19rpx 29rpx ;
			width: 28rpx;
			height: 32rpx;
			
			
		}
	.top-search .left {
		display: inline-block;
		margin: 16rpx 44rpx 14rpx 24rpx;
		width: 26rpx;
		height: 36rpx;
	}
	.top-search text {
		display: block;
		margin: 12rpx 24rpx 40rpx 16rpx;
		
	}
	
	.tab-ul{
		display: flex;
		justify-content: space-around;
		border-bottom: 10rpx solid #eee;
	}
	
	.tab-list{
		margin: 24rpx 0 26rpx 0;
		font-size: 30rpx;
		color: #828282;
	}
	.active{
		color:rgba(255,102,0,1) ;
		border-bottom: 4rpx solid rgba(255,102,0,1) ;
	}
</style>
